<script setup lang="ts" name="SaleRank">
import { onMounted, ref } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { reqSaleRank } from '@/apis/supply'
import type { GoodsSaleRankResponseData, GoodsSaleRankList } from '@/apis/supply/type';
let rankList = ref<GoodsSaleRankList>([]);
onMounted(() => {
  getGoodsSaleRank();
})
async function getGoodsSaleRank() {
  let res: GoodsSaleRankResponseData = await reqSaleRank();
  if (res.code === 200) {
    rankList.value = res.data.list;
    console.log(rankList.value,'近一周门店销售排名');
  }
}
</script>

<template>
  <div class="ScrollEChartCont">
    <div class="msgTitle backgroundImg">
      <span class="msgSpanTitle" style="width: 10%;">排名</span>
      <span class="msgSpanTitle" style="width: 60%;">商品</span>
      <span class="msgSpanTitle" style="width: 15%;">销量</span>
      <span class="msgSpanTitle" style="width: 15%;">销售环比</span>
    </div>
    <div class="msgScroll">
      <vue3-seamless-scroll :list="rankList" class="scroll" :hover="true" :step="1" :limitScrollNum="13" :copyNum="1"
        ref="msgListRefs">
        <div class="msgScrollItem backgroundImg" v-for="(item, index) in rankList" :key="item.commodityId">
          <span class="msgSpanItem" style="width: 10%;">{{ index + 1 }}</span>
          <span class="msgSpanItem" style="width: 60%;">{{ item.shoppingName }}</span>
          <span class="msgSpanItem" style="width: 15%;">{{ item.salesData }}</span>
          <span class="msgSpanItem" style="width: 15%;">{{ item.salesMonth }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>

</template>



<style scoped lang="scss">
.ScrollEChartCont {
  padding: 0 5px;
  overflow: hidden;
  width: 100%;
  height: 550px;

  .msgTitle {
    width: 100%;
    height: 40px;
    // background: RGBA(16, 41, 88, 1);
    background-image: url(../assets/imgs/Rectangle.png);
    background-size: 100% 100%;
    display: flex;
    line-height: 40px;

    // overflow: hidden;
    .msgSpanTitle {
      width: 25%;
      font-family: PingFang SC, PingFang SC;
      font-size: 16px;
      text-align: center;
      font-weight: bold;
      color: #FFFFFF;
    }
  }

  .msgScroll {
    width: 100%;
    height: 500px;
    overflow: hidden;

    .msgScrollItem {
      height: 40px;
      display: flex;
      justify-content: space-around;
      background-image: url(../assets/imgs/itemBgImg.png);
      background-size: 100% 100%;
      line-height: 40px;

      .msgSpanItem {
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出的文本 */
        text-overflow: ellipsis;
        /* 使用省略号表示文本溢出 */
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        // font-weight: bold;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}


.backgroundImg {
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  // background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}
</style>